<COLGROUP>NN n/a   IE 3   HTML 4
<COLGROUP>...</COLGROUP>End Tag: Optional
 

The COLGROUP element provides shortcuts to assigning widths and other characteristics (styles) to one or more subsets of columns within a table. With this information appearing early in the TABLE element source code, a browser equipped to do so starts rendering the table before all source code for the table has loaded (at which time it would otherwise perform all of its geographical calculations).

You can use the COLGROUP element in combination with the COL element or by itself. You may also define a COLGROUP that has COL elements nested within to assist in defining subsets of columns that share some attribute or style settings. The need for the element's end tag is determined by the presence of standalone COL elements following the COLGROUP element. For example, if you specify column groupings entirely with COLGROUP elements, end tags are not necessary:

<TABLE>
<COLGROUP SPAN=2 WIDTH=30>
<COLGROUP SPAN=3 WIDTH=40>
<THEAD>

If you have a freestanding COL element following the COLGROUP element, you must clearly end the COLGROUP element before the standalone COL element:

<TABLE>
<COLGROUP CLASS="leftCols">
<COL WIDTH=30>
<COL WIDTH=20>
</COLGROUP>
<COL CLASS="priceCol" WIDTH=25>
<THEAD>
...

The structure depends on how you need to assign widths and styles to individual columns or contiguous columns. To create a column grouping that consists of multiple adjacent columns, use the SPAN attribute. This is entirely different from the COLSPAN attribute of a TD element, which has the visual impact of joining adjacent cells together as one. The SPAN attribute helps define the number of columns to be treated structurally as a group (for assigning attribute and style sheet settings across multiple columns, regardless of the column content).

No matter how you address the column structure of your table, the total number of columns defined in all COL and COLGROUP elements should equal the physical number of columns you intend for the table. If there should be more cells in a row than columns defined in COL and COLGROUP, the browser probably has to reflow the table and discard whatever incremental rendering it had accomplished. The following three skeletal examples specify HTML 4.0 tables with six columns:

<TABLE>
<COLGROUP SPAN=6>
...
</TABLE>

<TABLE>
<COL>
<COLGROUP SPAN=4>
<COL>
...
</TABLE>

<TABLE>
<COLGROUP>
    <COL REPEAT=2>
</COLGROUP>
<COLGROUP SPAN=4>
...
</TABLE>

HTML 4.0 specifications for the COLGROUP element exceed the implementation in Internet Explorer 4 in some respects. For example, HTML 4.0 provides for alignment within a column to be around any character, such as the decimal point of a money amount. This kind of feature adds to the rationale behind the COL element (see the COL element for an example).

Syntactically, there is little difference between a COLGROUP and COL element (a minor difference in the IE 4 implementation only). A COLGROUP element, however, lends a structural integrity to a group of columns that is rendered differently when the containing TABLE element specifies RULES="groups"; the browser draws rule lines (standard table borders in IE 4) only between COLGROUP elements and not COL elements.

 
Example
<COLGROUP CLASS="dateCols" WIDTH="15" ALIGN="right">
 
Object Model Reference
IE [window.]document.all.elementID
ALIGNNN n/a   IE 3   HTML 4
ALIGN="alignConstant"Optional
 

Establishes the horizontal alignment characteristics of content within column(s) covered by the COLGROUP element. The HTML 4.0 specification defines settings for the ALIGN attribute that are not yet reflected in the CSS specification. Therefore, this ALIGN attribute is not fully deprecated. As a rule, alignment should be specified by style sheet wherever possible.

Internet Explorer 3 documents label this attribute HALIGN. In practice, IE 3 for Windows appears to ignore both the ALIGN and HALIGN attribute for the COLGROUP element.

 
Example
<COLGROUP CLASS="dateCols" WIDTH="15" ALIGN="right" SPAN=3>
 
Value
HTML 4.0 and IE 4 have two sets of attribute values:
Value IE 4 HTML 4.0
center
* *
char
- *
justify
- *
left
* *
right
* *
The values center, left, and right are self-explanatory. The value justify is intended to space content so that text is justified down both left and right edges. For the value char, the CHAR attribute must also be set to specify the character on which alignment revolves. In the HTML 4.0 specification example, content that does not contain the character appears to be right-aligned to the location of the character in other rows of the same column. It is important to bear in mind that the ALIGN attribute applies to every row of a column, including any TH element you specify for the table. If you want a different alignment for the column header, override the setting with a separate ALIGN attribute or text-align style sheet attribute for the THEAD or individual TH elements.
 
Default left
 
Object Model Reference
IE [window.]document.all.elementID.align
CHARNN n/a   IE n/a   HTML 4
CHAR="character"Optional
 

The CHAR attribute defines the text character used as an alignment point for text within a column. This attribute is of value only for the ALIGN attribute set to "char".

 
Example
<COLGROUP CLASS="priceCols" ALIGN="char" CHAR="." SPAN=2>
 
Value
Any single text character.
 
Default None.
CHAROFFNN n/a   IE n/a   HTML 4
CHAROFF="length"Optional
 

The CHAROFF attribute lets you set a specific offset point at which the character specified by the CHAR attribute is to appear within a cell. This attribute is provided in case the browser default positioning does not meet with the design goals of the table.

 
Example
<COLGROUP CLASS="priceColumn" ALIGN="char" CHAR="." CHAROFF="80%" SPAN=2>
 
Value
Any length value in pixels or percentage of cell space.
 
Default None.
SPANNN n/a   IE 3   HTML 4
SPAN=columnCountOptional
 

Defines the number of adjacent columns for which the COLGROUP element's attribute and style settings apply. If this attribute is missing, the COLGROUP element governs a single column. You can combine multiple COLGROUP elements of different SPAN sizes as needed for your column subgrouping.

This corresponding attribute for the COL element is represented in IE 4 by the SPAN attribute and in HTML 4.0 by the REPEAT attribute.

 
Example
<COLGROUP SPAN=3>
 
Value
Integer value greater than zero.
 
Default 1
 
Object Model Reference
IE [window.]document.all.elementID.span
VALIGNNN n/a   IE 3   HTML 4
VALIGN="alignmentConstant"Optional
 

Determines the vertical alignment of content within cells of the column(s) covered by the COLGROUP element. You can override the vertical alignment for a particular cell anywhere in the column.

 
Example
<COLGROUP VALIGN="middle">
 
Value
Four constant values are recognized by both IE 4 and HTML 4: top | middle | bottom | baseline. With top and bottom, the content is rendered flush (or very close to it) to the top and bottom of the table cell. Set to middle (the default), the content floats perfectly centered vertically in the cell. When one cell's contents might wrap to multiple lines at common window widths (assuming a variable table width), it is advisable to set the VALIGN attributes of all cells in the same row (or all COLGROUP elements) to baseline. This assures that the character baseline of the first (or only) line of a cell's text aligns with the other cells in the row--usually the most aesthetically pleasing arrangement.
 
Default middle
 
Object Model Reference
IE [window.]document.all.elementID.vAlign
WIDTHNN n/a   IE 3   HTML 4
WIDTH="multiLength"Optional
 

Defines the maximum width for the column(s) covered by the COLGROUP element. In practice (in IE 4 Windows, anyway), the browser won't render a column narrower than the widest contiguous stretch of characters not containing whitespace (e.g., the longest word). The precise measure of such a column width, of course, depends on the font characteristics of the content, as well. Internet Explorer 4 for the Mac mixes up column width assignments when the COLGROUP element is deployed.

 
Example
<COLGROUP WIDTH=100>
 
Value
Internet Explorer 4 accepts length values for the WIDTH in the form of pixel measures (without the "px" unit) or percentage of available horizontal space allocated to the entire table (WIDTH="25%"). An alternate variation of the proportional length value is described in the HTML 4.0 specification. For a COLGROUP element, you can specify WIDTH="*0" to instruct the browser to render all columns according to the minimum width necessary to display the content of the cells in the column. For a browser to make this calculation, it must load all table contents, thus eliminating the possibility of incremental rendering of a long table. For more information about proportional lengths, see the WIDTH attribute of the COL element.
 
Default Determined by browser calculation.